<template>
    <div>
      <h2>添加会员</h2>
      <a href="/show">会员显示</a>
      <table class="table">
        <tbody>
          <tr>
            <td>姓名</td>
            <td><input type="text" v-model="data.name" /></td>
          </tr>
          <tr>
            <td>密码</td>
            <td><input type="password" v-model="data.password" /></td>
          </tr>
          <tr>
            <td>性别</td>
            <td>
              <input
                type="radio"
                name="sex"
                value="1"
                v-model="data.sex"
                checked
              />男
              <input type="radio" name="sex" value="2" v-model="data.sex" />女
            </td>
          </tr> 
          <tr>
            <td>电话</td>
            <td><input type="text" v-model="data.phoneNumber" /></td>
          </tr>
          <tr>
            <td>年龄</td>
            <td><input type="text" v-model="data.age" /></td>
          </tr>
          <tr>
            <td>添加日期</td>
            <td><input type="date" v-model="data.createDate" /></td>
          </tr>
          <tr>
            <td>状态</td>
            <td>
              <input type="checkbox" v-model="data.state" checked />
              选择表示启用,未选择表示禁用
            </td>
          </tr>
          <tr>
            <td>会员等级</td>
            <td>
              <select v-model="data.memberLevelId">
                <option value="0">请选择</option>
                <option v-for="a in xlk" :value="a.id">
                  {{ a.levelTitle }}
                </option>
              </select>
            </td>
          </tr>
          <tr>
            <td>头像</td>
            <td>
              <input type="file" @change="ImgUrl" />
              <img
                :src="'https://localhost:7192/' + data.img"
                style="height: 100px; width: 100px"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="button" value="修改" @click="update" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import axios from "axios";
  import { useRouter,useRoute } from "vue-router";
import moment from "moment";
  const router = useRouter();
  const route = useRoute();
  //文件图片
  const ImgUrl = (e: any) => {
    var f = e.target.files[0];
    var fd = new FormData();
    fd.append("file", f);
    axios.post("https://localhost:7192/api/ImgUrl", fd).then((res) => {
      data.value.img = res.data;
    });
  };
  
  const data = ref({
    id: 0,
    name: "",
    password: "",
    sex: 0, 
    phoneNumber: "",
    age: 0,
    isDelete: true,
    createDate: "",
    state: true,
    memberLevelId: 0,
    img: "",
  });
  //下拉框
  const xlk = ref([
    {
      id: 0,
      levelTitle: "",
      state: true,
    },
  ]);
  const xlkk = () => {
    axios.get("https://localhost:7192/api/XLK").then((res) => {
      xlk.value = res.data;
    });
  };
  onMounted(() => {
    getid();
    xlkk(); 
  });

  const getid=()=>{
        var val=route.query.id;
        axios.get("https://localhost:7192/api/Mem/Getid",{params:{id:val}}).then(res=>{
            data.value=res.data;
           data.value.createDate=moment(data.value.createDate).format("YYYY-MM-DD");
        })

  }

  
  const update = () => {
    axios.put("https://localhost:7192/api/Mem/Update",data.value).then(res=>{
        if(res.data>0)
    {
       alert("修改成功")
       router.push({path:'/show'})
    }
    else if(res.data==-1)
    {
         alert("名称重复")
    }
    else{
        alert("添加失败")
    }
    })
  };
  </script>
  
  <style scoped></style>
  